<template>
  <div>
    <div class="back_box">
      <div class="back_btn">
        <img
            v-show="showView"
            @click="$emit('back')"
            src='../assets/back.png'
        >
      </div>
      <div class="back_text" v-if="titlesub" :class="titlesub?'flex_box':''">
        <div class="flex_box_title" @click="totitle()" :class="active=='1'?'active':''">
          {{title}}
        </div>
        <div class="flex_box_title" @click="tosubtitle()" :class="active=='2'?'active':''">
          {{titlesub}}
        </div>
      </div>
      <div class="back_text" v-else>
        {{title}}
      </div>
      <div class="back_text1">
        <slot></slot>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    titlesub:{
      type: String,
      default: "",
    },
    showView: {
      type: Boolean,
      default: true,
    },
    active:{
      type: String,
      default: "1",
    },
  },
  methods:{
    tosubtitle(){
      let num = 0;
      this.$router.replace({
        name: "orders5g",
        params: { num }
      });
    },
    totitle(){
      let num = 0;
      this.$router.replace({
        name: "orders",
        params: { num }
      });
    },
  }
};
</script>
<style scoped>
.back_box {
  background: #fff!important;
  width: 100vw;
  height: 13.33vw;
  line-height: 13.33vw;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
}
.back_btn {
  width: 20vw;
  margin: 1.33vw  0 0 3vw;
  /* position: absolute; */
  /* left: 5.3vw; */
  /* top: 2.3vw; */
}
.back_btn img {
  width: 2.9vw;
  height: 5.8vw;
}
.back_text {
  font-size: 4.8vw;
  text-align: center;
  /* position: absolute; */
  /* right: 44vw; */
}
.back_text1 {
  font-size: 4.8vw;
  float: right;
  margin-right: 3vw;
  width: 20vw;
}
.flex_box{
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.active{
  color: #f40c28;
}
</style>
